<template>
  <teleport to="body">
    <transition name="d-fade-in">
      <div
        v-show="state.isLocked"
        class="d-lock-screen"
        @click="inputPassHanel"
        :class="{ inputPass: state.inputPass }"
        :style="bgImage"
      >
        <div class="d-lock-screen-date">
          <div class="d-lock-screen-time">{{ state.time }}</div>
          <div class="d-lock-screen-week">
            <span>{{ state.date }}</span>
            <span>星期{{ ['日', '一', '二', '三', '四', '五', '六',][state.week] }}</span>
          </div>
          <!-- <div class="d-lock-screen-weather">{{ state.weather }}</div> -->
        </div>

        <div class="d-lock-screen-input">
          <img
            class="d-lock-screen-avatar"
            src="https://youke1.picui.cn/s1/2025/09/09/68c026e5f2ecb.png"
          />
          <p class="name">{{ props.name }}</p>
          <div>
            <input ref="refInput" class="input" maxlength="20" placeholder="请输入密码" type="password" />
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>
<script lang="ts">
export default {
  name: "lockScreen",
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
import { reactive, ref, Ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
import { debounce } from "throttle-debounce";
import local from '../utils/localStrong'
import { on, off } from '../utils/dom'
import dayjs from 'dayjs'
import {
  timeFormat,
  requestPictureInPicture,
  toggleFullScreen,
} from "../utils/util";
import { clearInterval } from 'timers';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  name: String,
  logo: String,
  timer: {
    type: Number,
    default: 5,
  }
}); //props
const emits = defineEmits(["update:modelValue", "locked", "enter", "unlock"]); //emits

const refInput: Ref<HTMLInputElement | null> = ref(null); //wrap
const state = reactive({
  bingWallpaper: {
    enddate: '',
    fullSrc: ''
  },
  time: dayjs().format('HH:mm'),
  date: dayjs().format('M月D日'),
  week: dayjs().day(),
  weather: '北京 晴转多云 12℃',
  lockTimer: new Date().getTime(),
  isLocked: false,
  updateTime: null,
  lockTime: null, //整体锁定倒计时
  inputLockTime: null, //输入情况下锁定倒计时
  inputPass: false,
});
// 获取本地壁纸
 state.bingWallpaper = local.get('bingWallpaper') || {}

// 随机获取bing壁纸API
const randomBingApi = () => {
  const apis = [
    'https://api.dreamwq.com/api/bing',
    'https://bing.img.run/rand_uhd.php',
    'https://bing.img.run/rand.php',
    'https://bing.img.run/rand_1366x768.php'
  ];
  // dreamwq接口返回json，bing.img.run接口返回图片url
  // 30%概率用dreamwq，70%概率用bing.img.run
  const rand = Math.random();
  if (rand < 0.3) return apis[0];
  // 随机选一个图片API
  return apis[Math.floor(Math.random() * 3) + 1];
}

const getBingWallpaper = () => {
  const api = randomBingApi();
  if (api === 'https://api.dreamwq.com/api/bing') {
    fetch(api).then(res => res.json()).then(res => {
      let data = res.data || {};
  local.set('bingWallpaper', JSON.stringify(data));
  state.bingWallpaper = data;
    });
  } else {
    // 直接用图片url
    const imgUrl = api + '?t=' + Date.now(); // 防止缓存
    const data = { fullSrc: imgUrl, enddate: dayjs().format('YYYYMMDD') };
    local.set('bingWallpaper', data);
    state.bingWallpaper = data;
  }
}

if (state.bingWallpaper.enddate != dayjs().format('YYYYMMDD')) {
  getBingWallpaper()
}
// 获取背景图
const bgImage = computed(() => ({ backgroundImage: `url(${state.bingWallpaper.fullSrc})` }))
// 更新时间
state.updateTime = setInterval(() => {
  state.time = dayjs().format('HH:mm')
  state.date = dayjs().format('M月D日')
  state.week = dayjs().day()
}, 1000)

const isLocked = computed({
  get: () => props.modelValue,
  set: (val: boolean) => {
    emits('update:modelValue', val);
  }
});
// 用 getter/setter 代理 state.isLocked
Object.defineProperty(state, 'isLocked', {
  get: () => isLocked.value,
  set: (val: boolean) => { isLocked.value = val; }
});
watch(() => props.modelValue, (val: boolean) => {
  if (!val) {
    unlockHandle(undefined);
  }
});
onMouseMove(undefined)
// 鼠标移动
function onMouseMove(e) {
  if (state.isLocked) return
  state.lockTimer = new Date().getTime()
  local.set('lockTimer', String(state.lockTimer))
  // state.lockTime = lockTime
  lockedTimer()
}
function lockedTimer() {
  window.clearInterval(state.lockTime)
  state.lockTime = setInterval(() => {
    let nowDate = new Date().getTime()
    if (state.isLocked || state.inputPass) return


    if ((nowDate - local.get('lockTimer')) > props.timer * 1000) {
      // 绑定keyup 执行inputPassHanelu事件
      on(document, 'keyup', inputPassHanel)
      state.isLocked = true
    } else {
      state.isLocked = false
    }
  }, 1000)
}
// 输入时锁定倒计时
function inputLockedTimer() {
  window.clearInterval(state.inputLockTime)
  if (state.isLocked && state.inputPass) {
    state.inputLockTime = setInterval(() => {
      let nowDate = new Date().getTime()
      if ((nowDate - state.lockTimer) > 60 * 1000) {
        state.inputPass = false
        window.clearInterval(state.inputLockTime)
      }
    }, 1000)
  }
}
// 输入密码
const inputPassHanel = () => {
  if (!refInput.value) return;
  refInput.value.focus();
  state.lockTimer = new Date().getTime();
  state.inputPass = true;
  inputLockedTimer();
  on(refInput.value, 'keydown', passEnter);
}
// 密码确认事件
function passEnter(ev: KeyboardEvent) {
  if (ev.code === 'Enter') {
    const password = refInput.value ? refInput.value.value : '';
    emits('enter', password);
  }
}
// 输入密码后解锁事件
function unlockHandle(password) {
  if (!state.inputPass) return;
  if (password === 'rfy') {
    if (refInput.value) {
      off(refInput.value, 'keydown', passEnter);
      refInput.value.value = '';
    }
    state.lockTimer = new Date().getTime();
    local.set('lockTimer', String(state.lockTimer));
    state.isLocked = false;
    setTimeout(() => {
      state.inputPass = false;
    }, 300);
    window.clearInterval(state.inputLockTime);
  } else {
    // 密码错误时不解锁，可加提示
    if (refInput.value) refInput.value.value = '';
    state.inputPass = true;
    // 可选：alert('密码错误，请重试');
  }
}
onMounted(() => {
  on(document, 'mousemove', onMouseMove)
  on(document, 'keyup', onMouseMove)
})

// 卸载事件
onUnmounted(() => {
  window.clearInterval(state.updateTime);
  window.clearInterval(state.inputLockTime);
  off(document, 'mousemove', onMouseMove);
  off(document, 'keyup', onMouseMove);
  if (refInput.value) {
    off(refInput.value, 'keydown', passEnter);
  }
});
</script>


<style lang="less" scoped>
@import "../style/transition.less";
@import "../style/lock-screen.less";
</style>